<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="el-card__header">
          {{ this.$route.params.id === ':id' ? '试题录入' : '试题修改' }}
        </div>
        <br />

        <!-- 表单 -->
        <el-form label-width="120px" :model="ruleForm" :rules="rules" ref="ruleForm">
          <!-- 学科 - 第一行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="学科:" prop="subjectID">
                <el-select
                  v-model="ruleForm.subjectID"
                  placeholder="请选择学科"
                  style="width: 400px"
                >
                  <el-option
                    v-for="item in allSubject"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click.native="catalogueSimple2(item.value)"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 目录 - 第二行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="目录:" prop="catalogID">
                <el-select
                  v-model="ruleForm.catalogID"
                  placeholder="请选择目录"
                  style="width: 400px"
                >
                  <el-option
                    v-for="item in allTwoLevelDirectory"
                    :key="item.id"
                    :label="item.directoryName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 企业 - 第三行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="企业:" prop="enterpriseID">
                <el-select
                  v-model="ruleForm.enterpriseID"
                  placeholder="请选择企业"
                  style="width: 400px"
                >
                  <el-option
                    v-for="item in allEnterprise"
                    :key="item.id"
                    :label="item.company"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 城市 - 第四行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="城市:" prop="city">
                <!-- 城市下拉框 -->
                <el-select
                  @change="changeProvince"
                  v-model="ruleForm.province"
                  placeholder="请选择城市"
                  style="width: 194px"
                >
                  <el-option
                    v-for="item in allCities"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                &nbsp;
                <!-- 区县下拉框 -->
                <el-select v-model="ruleForm.city" placeholder="请选择" style="width: 194px">
                  <el-option
                    v-for="item in allArea"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 方向 - 第五行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="方向:" prop="direction">
                <el-select v-model="ruleForm.direction" placeholder="请选择" style="width: 400px">
                  <el-option
                    v-for="item in alldirection"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 题型 - 第六行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="题型:">
                <el-radio-group v-model="questionType">
                  <el-radio v-for="item in allQuestionType" :key="item.value" :label="item.value">{{
                    item.label
                  }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 难度 - 第七行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="难度:">
                <el-radio-group v-model="difficulty">
                  <el-radio v-for="item in allDifficulty" :key="item.value" :label="item.value">{{
                    item.label
                  }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 题干 - 第八行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="题干:" prop="question">
                <div class="fuwenben">
                  <quillEditor
                    style="height: 180px"
                    v-model="ruleForm.question"
                    :options="editorOption"
                  ></quillEditor>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 选项 - 第九行 -->
          <el-row v-if="questionType != 3">
            <el-col :span="24">
              <el-form-item label="选项:">
                <el-radio-group v-model="isSubjectOption" v-if="questionType == 1">
                  <div class="option" v-for="(item, index) in ruleForm.options" :key="item.id">
                    <!-- 单选 -->
                    <el-radio :label="item.code" style="width: 20px" v-if="questionType == 1">
                      {{ item.code }} :
                    </el-radio>
                    <el-input v-model="item.title" placeholder="请输入内容"></el-input>
                    <upLoadImage @isImgURL="fn($event, index)" :title="item.img"></upLoadImage>
                  </div>
                </el-radio-group>
                <el-checkbox-group v-model="isAllSubjectOption" v-else>
                  <!-- 多选 -->
                  <div class="option" v-for="(item, index) in ruleForm.options" :key="item.id">
                    <el-checkbox :label="item.code" v-if="questionType == 2">
                      {{ item.code }} : &nbsp;</el-checkbox
                    >
                    <el-input v-model="item.title" placeholder="请输入内容"></el-input>
                    <upLoadImage @isImgURL="fn($event, index)" :title="item.img"></upLoadImage>
                  </div>
                </el-checkbox-group>
                <br />
                <!-- 按钮 -->
                <el-button @click="addSubjectFn" :disabled="questionType == '1'" type="danger">
                  +增加选项与答案
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 解析视频 - 第十行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="解析视频:">
                <el-input
                  v-model="ruleForm.videoURL"
                  placeholder="请输入视频链接"
                  style="width: 400px"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 答案解析 - 第十一行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="答案解析:" prop="answer">
                <div class="fuwenben">
                  <quillEditor
                    style="height: 180px"
                    v-model="ruleForm.answer"
                    :options="editorOption"
                  ></quillEditor>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 题目备注 - 第十二行 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="题目备注:" prop="region">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="ruleForm.remarks"
                  style="min-height: 33px; width: 400px"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 试题标签 - 第十三行  -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="试题标签:" prop="region">
                <el-select
                  v-model="ruleForm.tags"
                  placeholder="请选择试题标签"
                  style="width: 400px"
                >
                  <el-option
                    v-for="item in allLabel"
                    :key="item.id"
                    :label="item.tagName"
                    :value="item.tagName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 按钮 - 第十四行   -->
          <el-button type="primary" @click="submission">确认提交</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 富文本编辑器
import { quillEditor } from 'vue-quill-editor'
// 上传图片组件---------------------
import upLoadImage from '@/module-hmmm/pages/lxy/upLoadImage'
// 接口-------------
// 学科目录API
import { subjectSimpleAPI } from '@/api/hmmm/subjects.js'
// 二级学科目录接口API
import { catalogueListAPI } from '@/api/hmmm/directorys.js'
// 基础题库添加API
import { basicsAddAPI, basicsDetailAPI, basicsUpdateAPI } from '@/api/hmmm/questions.js'
// 处理标签
import { labelListAPI } from '@/api/hmmm/tags.js'
// 城市
import { provinces, citys } from '@/api/hmmm/citys.js'
// 枚举
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
// 获取企业列表
import { list } from '@/api/hmmm/companys.js'
export default {
  data() {
    return {
      // 富文本编辑器配置，顶部的工具栏
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            ['image', 'link']
          ]
        },
        placeholder: '请输入正文'
      },
      // 第一行------------------
      allSubject: [], // 全部学科
      // 第二行------------------
      allTwoLevelDirectory: [], // 二级目录
      // 企业 - 第三行
      allEnterprise: [], // 全部企业
      // 第四行------------------
      allCities: [], // 全部城市
      allArea: [], // 全部市区
      // 方向 - 第五行
      alldirection: direction, // 方向
      // 题型 - 第六行
      allQuestionType: questionType, // 题型
      // 难度 - 第七行
      allDifficulty: difficulty, // 难度
      // 单选选中的
      isSubjectOption: '',
      // 多选选中的
      isAllSubjectOption: [],
      // 最后一行------------------
      allLabel: [], // 试题标签
      // 选中的----
      remarks: '', // 题目备注 - 第十二行
      tags: '', // 选中的试题标签
      videoURL: '', // 解析视频 - 第十行
      ruleForm: {
        subjectID: '', // 选中的学科
        catalogID: '', // 选中的二级目录
        enterpriseID: '', // 选中的企业
        province: '', // 选中的城市
        city: '', // 选中的市区
        direction: '', // 选中的方向
        question: '', // 题干 - 第八行
        answer: '', // 答案解析 - 第十一行
        options: [
          {
            // id: new Date().getTime() - 1,
            code: 'A',
            img: '',
            title: '',
            isRight: false
          },
          {
            // id: new Date().getTime(),
            code: 'B',
            img: '',
            title: '',
            isRight: false
          },
          {
            // id: new Date().getTime() + 1,
            code: 'C',
            img: '',
            title: '',
            isRight: false
          },
          {
            // id: new Date().getTime() + 2,
            code: 'D',
            img: '',
            title: '',
            isRight: false
          }
        ]
      },
      questionType: 1, // 选中的题型
      difficulty: 1, // 选中的难度
      // 规则
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: ['blur', 'change'] }],
        catalogID: [{ required: true, message: '请选择目录', trigger: ['blur', 'change'] }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: ['blur', 'change'] }],
        city: [{ required: true, message: '请选择地区', trigger: ['blur', 'change'] }],
        direction: [{ required: true, message: '请选择方向', trigger: ['blur', 'change'] }],
        question: [{ required: true, message: '请输入题干', trigger: ['blur', 'change'] }],
        answer: [{ required: true, message: '请输入答案解析', trigger: ['blur', 'change'] }]
      }
    }
  },
  components: {
    // 富文本编辑器
    quillEditor,
    // 上传图片组件
    upLoadImage
  },
  created() {
    this.subjectSimple() // 学科目录
    this.allCities = provinces() // 城市联动
    this.getEnterpriseList() // 获取企业列表

    if (this.$route.params.id !== ':id') {
      this.basicsDetail(this.$route.params.id)
    } else {
      this.ruleForm.options = [
        {
          // id: new Date().getTime() - 1,
          code: 'A',
          img: '',
          title: '',
          isRight: false
        },
        {
          // id: new Date().getTime(),
          code: 'B',
          img: '',
          title: '',
          isRight: false
        },
        {
          // id: new Date().getTime() + 1,
          code: 'C',
          img: '',
          title: '',
          isRight: false
        },
        {
          // id: new Date().getTime() + 2,
          code: 'D',
          img: '',
          title: '',
          isRight: false
        }
      ]
    }
  },
  watch: {
    // 单选选中的
    isSubjectOption(newV) {
      this.ruleForm.options.find(item =>
        item.code === newV ? (item.isRight = true) : (item.isRight = false)
      )
    },
    // 多选选中的
    isAllSubjectOption(newV) {
      this.ruleForm.options.map(item => {
        if (newV.includes(item.code)) {
          item.isRight = true
        }
      })
    }
  },
  methods: {
    // 学科目录
    async subjectSimple() {
      const { data } = await subjectSimpleAPI()
      this.allSubject = data
    },
    // 二级学科目录 and 标签
    async catalogueSimple(id) {
      // 处理二级学科目录
      const { data } = await catalogueListAPI({ subjectID: id })
      this.allTwoLevelDirectory = data.items
      // 处理标签
      const { data: res } = await labelListAPI({ subjectID: id })
      this.allLabel = res.items
    },
    async catalogueSimple2(id) {
      this.ruleForm.subjectID = id
      this.ruleForm.catalogID = '' // 选中的二级目录
      this.ruleForm.tags = '' // 选中的标签
      // 处理二级学科目录
      const { data } = await catalogueListAPI({ subjectID: id })
      this.allTwoLevelDirectory = data.items
      // 处理标签
      const { data: res } = await labelListAPI({ subjectID: id })
      this.allLabel = res.items
    },
    // 获取企业列表
    async getEnterpriseList() {
      const {
        data: { items }
      } = await list()
      this.allEnterprise = items
    },
    // 字母自增
    addSubjectFn() {
      const obj = {
        // id: new Date().getTime(),
        code: String.fromCharCode('A'.charCodeAt(0) + this.ruleForm.options.length),
        img: '',
        title: '',
        isRight: ''
      }
      this.ruleForm.options.push(obj)
    },
    // 城市联动
    changeProvince() {
      this.ruleForm.city = ''
      this.allArea = citys(this.ruleForm.province)
    },
    // 提交按钮
    submission() {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) {
          this.$message.error('将题目信息填写完整才能提交哦!')
          return
        }
        // 添加数据
        if (this.$route.params.id === ':id') {
          await basicsAddAPI({
            ...this.ruleForm,
            questionType: String(this.questionType),
            difficulty: String(this.difficulty)
          })
        } else {
          // 修改数据
          await basicsUpdateAPI({
            id: this.$route.params.id,
            ...this.ruleForm,
            questionType: String(this.questionType),
            difficulty: String(this.difficulty)
          })
        }
        this.$router.push('/questions/list')
      })
    },
    // 获取子组件传过来的url
    fn(url, index) {
      this.ruleForm.options[index].img = url
    },
    // 数据回填
    async basicsDetail(id) {
      const { data } = await basicsDetailAPI({ id: id })
      this.ruleForm = data
      this.catalogueSimple(this.ruleForm.subjectID)
      this.questionType = +data.questionType
      this.difficulty = +data.difficulty
      if (+data.questionType === 1) {
        data.options.forEach(item => {
          if (item.isRight !== 0) {
            this.isSubjectOption = item.code
          }
        })
      }
      if (+data.questionType === 2) {
        data.options.forEach(item => {
          if (item.isRight !== 0) {
            this.isAllSubjectOption.push(item.code)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fuwenben {
  height: 235px;
}
.option {
  display: flex;
  align-items: center;
  vertical-align: middle;
  margin-bottom: 10px;
  height: 60px;
}
.option .el-input {
  width: 240px;
  margin-right: 10px;
}
.el-button--primary {
  margin-left: 120px;
}
</style>
